<template>
  <div class="user-manage-list">
    <a-table
      size="middle"
      :columns="userColumns"
      :scroll="{ x: 1000 }"
      :data-source="userData"
      :loading="isLoading"
      :pagination="{
        showTotal: () => `总共${pagination.total}条`,
        showQuickJumper: true,
        showSizeChanger: true,
        total: pagination.total,
        current: pagination.currentPage,
        pageSize: pagination.pageSize,
      }"
      :rowKey="(record) => record.id"
      @change="onPageChange"
    >
      <template slot="oper" slot-scope="record">
        <a-button type="danger" @click="onDel(record)">移除</a-button>
      </template>
    </a-table>
    <a-modal
      title="邀请人员"
      :visible="modalVisible"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <a-form-model
        :model="addUserForm"
        ref="addUserForm"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        :rules="rules"
      >
        <a-form-model-item label="手机号" prop="phone">
          <a-input
            v-model.trim="addUserForm.phone"
            :maxLength="20"
            placeholder="请输入手机号"
          />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import Cookie from 'js-cookie'
import Regex from "@/utils/regex.js";
import { userColumns } from "../../data";
import { getUserList, delUser, addUser } from "@/services/userManage.js";

export default {
  name: "UserManageList",
  components: {},
  data() {
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      userColumns,
      userData: [],
      isLoading: false,
      modalVisible: false,
      confirmLoading: false,
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      phone: undefined,
      addUserForm: {
        phone: ""
      },
      rules: {
        phone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          { validator: this.onCheckPhone, trigger: "blur" }
        ]
      }
    };
  },
  mounted() {
    this.getUserList();
  },
  methods: {
    onCheckPhone(rule, value, callback) {
      if (value === "") {
        callback(new Error("手机号不能为空"));
      } else if (!Regex.phone.test(value)) {
        callback(new Error("请输入正确的手机号"));
      } else {
        callback();
      }
    },
    async getUserList() {
      this.isLoading = true;
      let parmas = {
        ...this.pagination,
        departmentId: Cookie.get('departmentId')
      }
      try {
        const {
          data: {
            data: { users, total },
            code
          }
        } = await getUserList(parmas);
        this.isLoading = false;
        if (code === 200) {
          this.userData = users;
          this.pagination.total = total;
        }
      } catch (error) {
        this.isLoading = false;
      }
    },
    handleCancel() {
      this.$refs.addUserForm.resetFields();
      this.modalVisible = false;
    },
    handleOk() {
      this.$refs.addUserForm.validate(async valid => {
        if (valid) {
          let params = {
            phone: this.addUserForm.phone,
            departmentId: Cookie.get('departmentId')
          }
          const {
            data: { code, message }
          } = await addUser(params);
          if (code === 200) {
            this.getUserList();
            this.$refs.addUserForm.resetFields();
            this.$message.success(message);
            this.modalVisible = false;
          } else {
            this.$message.warning(message);
          }
        } else {
          return false;
        }
      });
    },
    openModal() {
      this.modalVisible = true;
    },
    onDel(record) {
      let that = this;
      this.$confirm({
        title: "移除操作",
        content: () => (
          <div>
            你确定移除该用户
            <span style="color:red;">{ record.username }</span>
            吗？
          </div>
        ),
        async onOk() {
          const { departmentId, enterpriseId, id } = record;
          const params = {
            departmentId,
            enterpriseId,
            id
          }
          const {
            data: { message, code }
          } = await delUser(params);
          if (code === 200) {
            that.$message.success("删除成功");
            let totalPage = Math.ceil((that.pagination.total - 1)/that.pagination.pageSize);
            let currentPage = that.pagination.currentPage > totalPage ? totalPage : that.pagination.currentPage;
            that.pagination.currentPage = that.pagination.currentPage < 1 ? 1 : currentPage;
            that.getUserList();
            that.visible = false;
          } else {
            that.$message.error(message);
          }
        }
      });
    },
    onPageChange(page) {
      this.pagination = {
        ...this.pagination,
        currentPage: page.current,
        pageSize: page.pageSize
      }
      this.getUserList();
    }
  }
};
</script>

<style lang="less" scoped>
</style>
